<template>
  <div class="pages companystatement">
    <!-- 搜索框 -->
    <div class="tableSearch">
      <el-form label-width="100px" class="demo-ruleForm" size="small" style="margin-top:15px;">
        <el-form-item label="日期:" style="margin-left:-55px">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="stateDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left:-50px">
          <el-select style="width:200px;" v-model="selectdata.selects" size="small" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="wxser" class="wxelForm" label-width="15px">
          <el-button type="primary" @click="serch" size="mini">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="total-income" style="margin-top:-10px">
      <div class="all-income">
        当前选择时间范围金额总计：  
        <span>{{sum}}</span>
        <div v-if="sum">
            元
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <!-- 门店销售金额排行 -->
    <div class="tableMain">
      <el-table :data="salesAmount" stripe border style="width: 90%">
        <el-table-column type="index" label="门店销售金额排行" align="center" width="150">
        </el-table-column>
        <el-table-column prop="shopName" label="门店名称" align="center">
        </el-table-column>
        <el-table-column prop="goodsAmount" label="商品售卖" align="center">
        </el-table-column>
        <el-table-column prop="serverAmount" label="服务售卖" align="center">
        </el-table-column>
        <!-- <el-table-column prop="memberAmount" label="会员卡充值" align="center">
        </el-table-column> -->
        <el-table-column prop="memberCardAmount" label="计次卡售卖金额" align="center">
        </el-table-column>
        <el-table-column prop="totalAmount" label="总计" align="center">
        </el-table-column>
      </el-table>
    </div>
     <!-- 表格 -->
    <!-- 商品营业数据 -->
     <div class="total-income">
      <div class="all-income">
        商品营业数据 
      </div>
    </div>
    <div class="tableMain">
      <el-table :data="shopData" border stripe style="width: 90%">
        <el-table-column prop="name" label="售卖方式" align="center">
        </el-table-column>
        <el-table-column prop="zhifubaoAmount" label="支付宝" align="center">
        </el-table-column>
        <el-table-column prop="weixinAmount" label="微信" align="center">
        </el-table-column>
        <el-table-column prop="xianjinAmount" label="现金" align="center">
        </el-table-column>
        <el-table-column prop="cardAmount" label="银行卡" align="center">
        </el-table-column>
        <el-table-column prop="memberAmount" label="会员卡" align="center">
        </el-table-column>
        <!-- <el-table-column prop="ticketAmount" label="优惠券" align="center">
        </el-table-column> -->
        <el-table-column prop="totalAmount" label="总计" align="center">
        </el-table-column>
      </el-table>
    </div>
     <!-- 服务数据数据 -->
     <div class="total-income">
      <div class="all-income">
        服务数据 
      </div>
    </div>
    <div class="tableMain">
      <el-table :data="serviceData" border stripe style="width: 90%">
        <el-table-column prop="name" label="售卖方式" align="center">
        </el-table-column>
        <el-table-column prop="zhifubaoAmount" label="支付宝" align="center">
        </el-table-column>
        <el-table-column prop="weixinAmount" label="微信" align="center">
        </el-table-column>
        <el-table-column prop="xianjinAmount" label="现金" align="center">
        </el-table-column>
        <el-table-column prop="cardAmount" label="银行卡" align="center">
        </el-table-column>
        <el-table-column prop="memberAmount" label="会员卡" align="center">
        </el-table-column>
        <!-- <el-table-column prop="ticketAmount" label="优惠券" align="center">
        </el-table-column> -->
        <el-table-column prop="totalAmount" label="总计" align="center">
        </el-table-column>
      </el-table>
    </div>
     <!-- 会员卡充值数据 -->
     <!-- 产品修改需求，隐藏该界面 -->
     <!-- <div class="total-income">
      <div class="all-income">
        会员卡充值数据 
      </div>
    </div>
    <div class="tableMain">
      <el-table :data="membershipcardData" border stripe style="width: 90%">
        <el-table-column prop="name" label="营业项目" align="center">
        </el-table-column>
        <el-table-column prop="zhifubaoAmount" label="支付宝" align="center">
        </el-table-column>
        <el-table-column prop="weixinAmount" label="微信" align="center">
        </el-table-column>
        <el-table-column prop="xianjinAmount" label="现金" align="center">
        </el-table-column>
        <el-table-column prop="cardAmount" label="银行卡" align="center">
        </el-table-column>
        <el-table-column prop="totalAmount" label="总计" align="center">
        </el-table-column>
      </el-table>
    </div> -->
     <!-- 计次卡数据 -->
     <div class="total-income">
      <div class="all-income">
        计次卡数据 
      </div>
    </div>
    <div class="tableMain" style="margin-bottom:100px;">
      <el-table :data="timingcardData" border stripe style="width: 90%">
        <el-table-column prop="shopName" label="门店" align="center">
        </el-table-column>
        <el-table-column prop="timesCardAmount" label="计次卡售卖金额" align="center">
        </el-table-column>
        <el-table-column prop="totalTimes" label="计次卡售卖次数" align="center">
        </el-table-column>
        <el-table-column prop="useTimes" label="计次卡使用" align="center">
        </el-table-column>
        <el-table-column prop="residueTimes" label="计次卡剩余次数" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { DailyReportByDate, selectBaseShopPageList } from '@/api'
import { mapState } from 'vuex'
import util from "@/util";
export default {
  computed: mapState(['merchantId']),
  data() {
    return {
      stateDate: [],//日期
      selectdata: {
        selects: ''
      },//选择的门店
      options: [],//门店的数组
      sum: '',//金额总计，
      salesAmount:[],//门店销售金额排行
      shopData:[],//商品数据
      serviceData:[],//服务数据数据
      membershipcardData:[],//会员卡充值数据
      timingcardData:[]//计次卡数据
    }
  },
  mounted() {
    this.init()
    this.getStoreList()
    this.getdata()
  },
  methods: {
    init(){
      const sevenDay = new Date()
      let sevenDays=new Date(sevenDay.getTime()-168*60*60*1000);
      var sevenDaysDate = util.foryear(sevenDays);
      this.stateDate.push(sevenDaysDate);
      const beforeDay = new Date()
      let beforeDays=new Date(beforeDay.getTime() - 24*60*60*1000);
      var beforeDaysDate = util.foryear(beforeDays);
      this.stateDate.push(beforeDaysDate);
    },
    serch(){
      this.getdata()
    },
    // 表格数据
    getdata() {
      if(this.selectdata.selects==""){
         this.selectdata.selects=this.merchantId
      }
      DailyReportByDate({
        shopId: this.selectdata.selects,
        startTime: this.stateDate[0],
        endTime: this.stateDate[1]
      }).then(res => {
        this.sum=res.data.timeTotalAmount
        this.salesAmount = res.data.list
        this.shopData = res.data.goodsList
        this.serviceData = res.data.serveList
        this.membershipcardData = res.data.memberList
        this.timingcardData = res.data.timesCardList
        
      })
    },
    // 获取门店
    getStoreList() {
      selectBaseShopPageList({
      businessId:this.merchantId,
      type:"3"
      }).then(res=>{
       let a={
           id:this.merchantId,
           name:"全部",
          }
        this.selectdata.selects=this.merchantId
        res.data.list.unshift(a)
        this.options=res.data.list
      
      })
     }
    }
}
</script>
<style>
.companystatement .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.companystatement .total-income {
  display: flex;
  padding: 0 11px 11px 0px;
  margin-top:30px;
}
.companystatement .total-income .all-income {
  flex: 1;
  height:30px;
  line-height: 40px;
    
}
.companystatement .el-range-editor--small .el-range__close-icon, .el-range-editor--small .el-range__icon{
    display: none !important;

}
</style>
